import { useEffect, useRef } from "react";

// export function usePageTitle(title: string) {
//   const oldTitle = document.title;

//   // 相当更新钩子
//   useEffect(() => {
//     document.title = title;
//   }, [title])

//   // 相当于卸载钩子
//   useEffect(() => () => {
//     document.title = oldTitle
//   }, [])
// }

// 有一个钩子，能改变网页的title。当组件销毁时，网页的title需要恢复到原先的名字。

export function usePageTitle(title: string) {
  // 由于闭包，不使用useRef也可以。但是useRef更直观易懂。
  // const oldTitle = document.title

  // useRef的作用就是保存参数，当函数式组件更新，被重新定义执行后，其值也不会改变
  const oldTitle = useRef(document.title).current;

  // 相当更新钩子
  useEffect(() => {
    document.title = title;
  }, [title]);

  // 相当于卸载钩子
  useEffect(
    () => () => {
      document.title = oldTitle;
    },
    []
  );
}
